<template>
  <el-scrollbar height="83vh">
    <vab-card>
      <header class="flex_sb_wrap">
        <p>组织架构</p>
        <div class="btn flex">
          <el-button size="small" @click="handleCopy('treeList')">
            复制
          </el-button>
          <el-button
            size="small"
            @click="handleCopy('treeList')"
            style="margin-right: 4px"
          >
            新建
          </el-button>

          <vab-icon
            :icon="isOpen ? 'arrow-down-s-fill' : 'arrow-up-s-fill'"
            @click="handleOpen"
          />
        </div>
      </header>
      <el-tree
        v-if="expandedKeys"
        ref="treeRef"
        :data="dataSource"
        node-key="id"
        @node-click="handleNodeClick"
        :default-expanded-keys="expandedKeys"
        :draggable="true"
      />
    </vab-card>
  </el-scrollbar>
</template>

<script lang="ts" setup>
  import type Node from 'element-plus/es/components/tree/src/model/node'
  import { ArrayFlat } from '~/src/utils/utils'
  const $baseMessage = inject<any>('$baseMessage')

  interface Tree {
    id: number
    label: string
    children?: Tree[]
  }
  let id = 1000

  let isOpen = ref(true)
  const treeRef: Ref<any> = ref(null)
  let expandedKeys = reactive<any>([])
  const defaultProps = {
    children: 'children',
    label: 'label',
  }

  const state: any = reactive({
    nodeMode: null,
  })
  // tree 展开/收缩
  const handleOpen = () => {
    isOpen.value = !isOpen.value
    formatData()
  }

  const handleNodeClick = (data: Node) => {
    state.nodeMode = data
  }
  const handleCopy = (key: string) => {
    if (state.nodeMode == null) {
      $baseMessage('请选择子公司节点后，再进行操作！', 'warning')
      return
    }
    const newChild = {
      id: id++,
      label: state.nodeMode.label + `(${id + 1})`,
      children: [],
    }
    if (!state.nodeMode.children) {
      state.nodeMode.children = []
    }
    state.nodeMode.children.push(newChild)
    dataSource.value = [...dataSource.value]
  }
  const handleNew = (key: string) => {}
  const dataSource = ref<Tree[]>([
    {
      id: 1,
      label: '公司集团',
      children: [
        {
          id: 4,
          label: '公司集团 two 1-1',
          children: [
            {
              id: 9,
              label: '公司集团 three 1-1-1',
            },
            {
              id: 10,
              label: '公司集团 three 1-1-2',
            },
          ],
        },
      ],
    },
    {
      id: 2,
      label: '公司集团 one 2',
      children: [
        {
          id: 5,
          label: '公司集团 two 2-1',
        },
        {
          id: 6,
          label: '公司集团 two 2-2',
        },
      ],
    },
    {
      id: 3,
      label: '公司集团 one 3',
      children: [
        {
          id: 7,
          label: '公司集团 two 3-1',
        },
        {
          id: 8,
          label: '公司集团 two 3-2',
        },
      ],
    },
  ])

  onMounted(() => {
    formatData()
  })

  // 获取所有节点
  const formatData = async () => {
    if (isOpen.value) {
      const _flatArray = await ArrayFlat(dataSource.value)
      expandedKeys = await _flatArray.map((item: any) => {
        return item.id
      })
    } else {
      expandedKeys = [1, 4, 9]
    }
  }
</script>
